<template>
  <view 
    class="zb-button" 
    :class="[
      `zb-button-${type}`,
      `zb-button-${size}`,
      `${plain ? 'zb-button-plain' : ''}`,
      `${round ? 'zb-button-round' : ''}`,
      `${block ? 'zb-button-block' : ''}`,
      `${disabled ? 'zb-button-disabled' : ''}`,
      `${square ? 'zb-button-square' : ''}`
    ]"
    @click="handleClick"
  >
    <slot />
  </view>
</template>

<script>
  export default {
    name:"zb-button",
    props: {
      // 类型: primary、warning、default、error、success
      type: {
        type: String,
        default: 'default'
      },
      // 描边按钮
      plain: {
        type: Boolean,
        default: false,
      },
      // 圆形按钮
      round: {
        type: Boolean,
        default: false,
      },
      // 方形按钮
      square: {
        type: Boolean,
        default: false,
      },
      // 块状元素
      block: {
        type: Boolean,
        default: false,
      },
      // 尺寸：large、normal、small、mini
      size: {
        type: String,
        default: 'normal'
      },
      // 禁用
      disabled: {
        type: Boolean,
        default: false,
      },
      to: {
        type: String,
        default: '',
      },
      replace: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        
      };
    },
    methods: {
      handleClick() {
        if (this.to) {
          if (this.replace) {
            uni.redirectTo({
              url: this.to,
            });
          } else {
            uni.navigateTo({
              url: this.to,
            });
          }
        } else {
          this.$emit('click');
        }
      },
    }
  }
</script>

<style lang="scss">
$large-size: 98rpx;
$normal-size: 88rpx;
$small-size: 64rpx;
$mini-size: 48rpx;
.zb-button {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  padding: 0 30rpx;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 0;
  &:active::after {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(#000, .05);
  }
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-radius: 4px;
  }
  // 按钮类型
  &.zb-button-primary {
    background-color: $uni-color-primary;
    color: #fff;
    &.zb-button-plain {
      background-color: #fff;
      color: $uni-color-primary;
      &::before {
        border-color: $uni-color-primary;
      }
    }
  }
  &.zb-button-success {
    background-color: $uni-color-success;
    color: #fff;
    &.zb-button-plain {
      background-color: #fff;
      color: $uni-color-success;
      &::before {
        border-color: $uni-color-success;
      }
    }
  }
  &.zb-button-warning {
    background-color: $uni-color-warning;
    color: #fff;
    &.zb-button-plain {
      background-color: #fff;
      color: $uni-color-warning;
      &::before {
        border-color: $uni-color-warning;
      }
    }
  }
  &.zb-button-error {
    background-color: $uni-color-error;
    color: #fff;
    &.zb-button-plain {
      background-color: #fff;
      color: $uni-color-error;
      &::before {
        border-color: $uni-color-error;
      }
    }
  }
  &.zb-button-default {
    background-color: #fff;
    color: #333;
    &::before {
      border-color: #ddd;
    }
  }
  // 按钮尺寸
  &.zb-button-large {
    width: 100%;
    display: block;
    font-size: 32rpx;
    height: $large-size;
    line-height: $large-size;
  }
  &.zb-button-normal {
    font-size: 28rpx;
    height: $normal-size;
    line-height: $normal-size;
  }
  &.zb-button-small {
    font-size: 24rpx;
    padding: 0 16rpx;
    height: $small-size;
    line-height: $small-size;
  }
  &.zb-button-mini {
    font-size: 20rpx;
    padding: 0 8rpx;
    height: $mini-size;
    line-height: $mini-size;
  }
  // 圆角按钮
  &.zb-button-round {
    border-radius: $normal-size;
    &::before {
      border-radius: $normal-size;
    }
  }
  // 方形按钮
  &.zb-button-square {
    border-radius: 0;
    &::before {
      border-radius: 0;
    }
  }
  // 块级元素
  &.zb-button-block {
    width: 100%;
    display: block;
  }
  // 禁用按钮
  &.zb-button-disabled {
    pointer-events: none;
    opacity: .5;
  }
}
</style>